import QtQuick
import QtQuick.Controls

Rectangle {
    id: root
    width: 200
    height: 200

    // 设置默认状态
    state: "state1"

    // 定义状态
    states: [
        State {
            name: "state1"
            // 状态1的属性更改
            PropertyChanges {
                target: rect
                x: 0
                y: 75
                color: "red"
            }
        },
        State {
            name: "state2"
            // 状态2的属性更改
            PropertyChanges {
                target: rect
                x: 150
                y: 75
                color: "green"
            }
        }
    ]

    Rectangle {
        id: rect
        x: 0
        y: 75
        width: 50
        height: 50
    }

    Button {
        text: "切换状态"
        anchors.bottom: parent.bottom

        onClicked: {
            if (root.state === "state1")
                root.state = "state2"
            else
                root.state = "state1"
        }
    }

    // 状态过渡动画
    transitions: [
        Transition {
            from: "state1"  // 从任何状态
            to: "state2"    // 到任何状态
            NumberAnimation {
                properties: "x"
                duration: 500
                easing.type: Easing.InOutQuad
            }
            ColorAnimation {
                duration: 500
            }
        }
    ]
}
